import { IvButton } from '@/components';
import { message } from 'antd';
import { useCallback, useEffect, useMemo, useState, useRef, memo } from 'react'
// 父组件
function ReactHooks(props) {
  // 4、useCallback：我现在只想如果只是父组件的参数发生了改变不想去重新渲染子组件 配合memo使用只有点击修改指定在第二个数组里面的才会去调用
  const [a, setA] = useState(1)
  const [b, setB] = useState(1)

  useEffect(() => {
    console.log('useEffect');

  }, [])
  const handleClick = useCallback(() => {
    console.log(55);
    setA(a + 1)
  }, [a]);

  return (
    <div>
      <IvButton   onClick={(e) => {e(); setA(a + 1) }}>a++</IvButton>
      <IvButton   onClick={(e) => {e(); setB(b + 1) }}>b++</IvButton>
      <div>a:{a}</div>
      <div>b:{b}</div>
      <div>b修改后组件3是不会重新渲染的</div>
      <ReactHooks1></ReactHooks1>
      <ReactHooks2></ReactHooks2>
      <ReactHooks3 a={a} fun={handleClick}></ReactHooks3>
    </div>
  )
}
// 子组件1
function ReactHooks1(props) {
  console.log('子组件1改动了');
  
  return (
    <div>子组件1</div>
  )
}
// 子组件2
function ReactHooks2(props) {
  console.log('子组件2改动了');
  return (
    <div>子组件2</div>
  )
}
const ReactHooks3 = memo((props:any) => {
  console.log('子组件3改动了');
  function asa(e){
    e()
    props.fun()
  }

  return <div>
    <IvButton onClick={(e)=>{asa(e)}}>按钮</IvButton>
    <div>
    {props.a}
    </div>
  </div>
})
export default ReactHooks